{extend name="public:base" /}

{block name="css"}
<link href="__STATIC__/layui/css/layui.css" rel="stylesheet">
<link href="__ADMIN__/css/style.css" rel="stylesheet">
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <a href="{:url('doGoodsComment', ['goods_id' => input('goods_id')])}" class="btn btn-primary btn-lg">新增</a>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="table-responsive">

                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th width="10%">会员昵称</th>
                                <th width="10%">联系方式</th>
                                <th width="30%">内容</th>
                                <th width="25%">图片</th>
                                <th width="15%">评价时间</th>
                                <th width="10%">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo" key="outer"}
                            <tr>
                                <td>{$vo.username}</td>
                                <td>{$vo.mobile}</td>
                                <td>{$vo.content}</td>
                                <td class="img_div">
                                    {volist name="vo.imgs_arr" id="v" key="inner"}
                                    <img onclick="addModelOpen({$outer}, {$inner})" src="{$v.path}" style="max-width: 60px; max-height: 60px; object-fit: cover"/>
                                    {/volist}
                                </td>
                                <td>{:timeFormat($vo.create_time)}</td>
                                <td class="project-actions">
                                    <a href="{:url('delComment', ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-del">
                                        <i class="fa fa-trash-o"></i> 删除
                                    </a>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>

                        {if !empty($list->items())}{$list->render()}{/if}
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!--  收益变更弹出框  -->
<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content animated fadeIn">
            <div class="modal-body">
                <div class="layui-carousel" id="img-box">
                    <div carousel-item class="img-item"></div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" onclick="modelClose()">关闭</button>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script src="__STATIC__/layui/layui.js"></script>
<script>
    var ins;
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        ins = carousel.render({
            elem: '#img-box'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

    function addModelOpen(outer_key, inner_key) {
        outer_key = outer_key - 1;
        inner_key = inner_key - 1;

        var all_imgs = $('.img_div').eq(outer_key).find('img');
        var imgs_str = '';

        if (all_imgs) {
            all_imgs.each(function (key, val) {
                var src = val.src;
                imgs_str += '<img src="' + src + '" />';
            })
        }

        $('.img-item').html(imgs_str);

        ins.reload({
            index: inner_key
        });

        $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
        $('#myModal').css('display', 'block').addClass('show');
    }

    function modelClose() {
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        $('#myModal').css('display', 'none').removeClass('show');
    }
</script>
{/block}